<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*------ Main Emoji Styling ------*/

        body {
            background: #f7f8f9;
        }

        .container {
            width: 100%;
            padding: 50px 0;
        }

        .wrapper {
            max-width: 482px;
            margin: 0 auto;
            overflow: auto;
            zoom: 1;
        }

        .emoji {
            box-sizing: border-box;
            float: left;
        }

        .face {
            width: 100px;
            height: 100px;
            position: relative;
            margin: 0 15px 30px 0;
            border-radius: 50%;
            background: #F2DD68;
        }

        .face:after {
            content: '';
            display: block;
            position: absolute;
            width: 100%;
            height: 100%;
            top: -8px;
            left: -8px;
            border-radius: 50%;
            box-shadow: 8px 8px 0 0 rgba(0, 0, 0, 0.07);
        }

        .eye {
            position: absolute;
            width: 11px;
            height: 11px;
            top: 32px;
            left: 16px;
            z-index: 1;
            border-radius: 50%;
            background: #995710;
        }

        .eye:last-child {
            left: auto;
            right: 16px;
        }

        .emoji:hover .eye {
            animation-name: blink;
            animation-iteration-count: infinite;
            animation-duration: 2s;
        }

        @keyframes blink {
            10% {
                height: 11px;
                top: 32px;
            }
            30% {
                height: 1px;
                top: 37px;
            }
            50% {
                height: 11px;
                top: 32px;
            }
        }

        .mouth {
            position: absolute;
            top: 48px;
            left: 0;
            right: 0;
            z-index: 1;
            width: 70px;
            height: 34px;
            margin: 0 auto;
            border-radius: 0 0 70px 70px;
            overflow: hidden;
            background: #995710;
        }

        .mouth:before,
        .mouth:after {
            content: '';
            position: absolute;
            display: block;
        }

        .mouth.teath:before {
            width: 100%;
            height: 10px;
            z-index: 2;
            background: #fffae6;
        }

        .mouth.tounge:after {
            position: absolute;
            width: 38px;
            height: 38px;
            left: 0;
            right: 0;
            top: 15px;
            margin: 0 auto;
            border-radius: 50%;
            background: #d8aa2b;
        }
        /*------ Grin Emoji Styling ------*/

        .grin .eye {
            transition: all 0.3s ease-in-out;
        }

        .grin:hover .eye {
            animation: none;
            height: 2px;
            top: 36px;
        }

        .grin:hover .mouth {
            animation-name: giggle;
            animation-iteration-count: infinite;
            animation-duration: 0.2s;
        }

        @keyframes giggle {
            0% {
                transform: translate(0, -1px);
            }
            50% {
                transform: translate(0, 2px);
            }
            100% {
                transform: translate(0, -1px);
            }
        }
        /*------ Sad Emoji Styling ------*/

        .sad .mouth {
            top: 44px;
            border-radius: 70px 70px 0 0;
        }

        .sad .mouth:before {
            display: none;
        }
        /*------ Shocked Emoji Styling ------*/

        .shocked .mouth {
            width: 25px;
            height: 25px;
            border-radius: 50%;
        }

        .shocked .eye {
            transition: all 0.2s ease-in-out;
        }

        .shocked:hover .eye {
            animation: none;
            transform: scale(1.3, 1.3);
            transition: all 1.5s ease-out;
        }

        .shocked:hover .mouth {
            animation-name: wow;
            animation-iteration-count: infinite;
            animation-duration: 2.5s;
        }

        @keyframes wow {
            70% {
                transform: scale(0.5, 0.5);
            }
            100% {
                transform: scale(1, 1);
            }
        }
        /*------ Smiling Emoji Styling ------*/

        .smile .mouth {
            width: 50px;
            height: 25px;
            background: transparent;
            border-radius: 0 0 50px 50px;
            border: 4px solid #995710;
            border-top: 0;
            -webkit-clip-path: inset(30% 0 0 0);
            clip-path: inset(30% 0 0 0);
        }
        /*------ Speechless Emoji Styling ------*/

        .speechless .mouth {
            width: 70px;
            height: 4px;
            top: 60px;
            border-radius: 0;
        }
        /*------ Love Emoji Styling ------*/

        .heart-eye {
            position: absolute;
            top: 30px;
            left: 16px;
            transform: rotate(-15deg);
        }

        .heart-eye:last-child {
            left: auto;
            right: 16px;
            transform: rotate(15deg);
        }

        .heart {
            display: block;
            width: 16px;
            height: 16px;
            background: #e25d5d;
            transform: rotate(-45deg);
        }

        .heart:before,
        .heart:after {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #e25d5d;
        }

        .heart:before {
            top: -8px;
            left: 0;
        }

        .heart:after {
            left: 8px;
            top: 0;
        }

        .love .mouth {
            transform: scale(0.5, 0.5);
        }

        .love:hover .heart-eye {
            animation-name: pulse;
            animation-iteration-count: infinite;
            animation-duration: 1s;
        }

        .love:hover .heart-eye:last-child {
            animation-name: pulse-right;
        }

        @keyframes pulse {
            30% {
                transform: scale(1.1, 1.1) rotate(-15deg);
            }
            70% {
                transform: scale(1, 1) rotate(-15deg);
            }
        }

        @keyframes pulse-right {
            30% {
                transform: scale(1.1, 1.1) rotate(15deg);
            }
            70% {
                transform: scale(1, 1) rotate(15deg);
            }
        }
        /*------ Angry Emoji Styling ------*/

        .angry .face {
            background: #e25d5d;
            transition: all 500ms ease-in-out;
        }

        .angry:hover .face {
            background: #e84747;
            animation-name: fuming;
            animation-iteration-count: infinite;
            animation-duration: 2s;
            animation-timing-function: linear;
        }

        @keyframes fuming {
            10% {
                transform: translate(-5px);
            }
            15% {
                transform: translate(5px);
            }
            20% {
                transform: translate(-5px);
            }
            25% {
                transform: translate(5px);
            }
            30% {
                transform: translate(-5px);
            }
            35% {
                transform: translate(5px);
            }
            40% {
                transform: translate(-5px);
            }
            45% {
                transform: translate(5px);
            }
            50% {
                transform: translate(0);
            }
        }

        .angry .eye,
        .angry .eye:before,
        .angry .mouth {
            background: #7f2626;
        }

        .angry .eye:before {
            content: '';
            display: block;
            position: absolute;
            width: 20px;
            height: 5px;
            top: -1px;
            left: -4px;
            transform: rotate(20deg);
        }

        .angry .eye:last-child:before {
            left: auto;
            right: -4px;
            transform: rotate(-20deg);
        }

        .angry .mouth {
            width: 20px;
            height: 4px;
            top: 64px;
            border-radius: 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="wrapper">
            <div class="emoji grin">
                <figure class="face">
                    <span class="eyes">
                <span class="eye"></span>
                    <span class="eye"></span>
                    </span>
                    <span class="mouth teath tounge">
              </span>
                </figure>
            </div>
            <div class="emoji sad">
                <figure class="face">
                    <span class="eyes">
                <span class="eye"></span>
                    <span class="eye"></span>
                    </span>
                    <span class="mouth tounge">
              </span>
                </figure>
            </div>
            <div class="emoji shocked">
                <figure class="face">
                    <span class="eyes">
                <span class="eye"></span>
                    <span class="eye"></span>
                    </span>
                    <span class="mouth">
              </span>
                </figure>
            </div>
            <div class="emoji laugh">
                <figure class="face">
                    <span class="eyes">
                <span class="eye"></span>
                    <span class="eye"></span>
                    </span>
                    <span class="mouth tounge">
              </span>
                </figure>
            </div>
            <div class="emoji smile">
                <figure class="face">
                    <span class="eyes">
                <span class="eye"></span>
                    <span class="eye"></span>
                    </span>
                    <span class="mouth">
              </span>
                </figure>
            </div>
            <div class="emoji speechless">
                <figure class="face">
                    <span class="eyes">
                <span class="eye"></span>
                    <span class="eye"></span>
                    </span>
                    <span class="mouth">
              </span>
                </figure>
            </div>
            <div class="emoji love">
                <figure class="face">
                    <span class="eyes">
                <span class="heart-eye">
                  <span class="heart"></span>
                    </span>
                    <span class="heart-eye">
                  <span class="heart"></span>
                    </span>
                    </span>
                    <span class="mouth tounge">
              </span>
                </figure>
            </div>
            <div class="emoji angry">
                <figure class="face">
                    <span class="eyes">
                  <span class="eye"></span>
                    <span class="eye"></span>
                    </span>
                    <span class="mouth">
              </span>
                </figure>
            </div>
        </div>
    </div>
</body>

</html>